<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>recorderPageJY</title>
  </head>
  <body style="display: flex">
    <div
      style="
        font-size: large;
        margin: auto;
        font-weight: bold;
        text-align: center;
      "
    >
      录制中
    </div>
    <script>
      async function startMediaRecorder() {
        var stream = await navigator.mediaDevices.getDisplayMedia({
          video: true,
        });
        var mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
          ? "video/webm; codecs=vp9"
          : "video/webm";
        var mediaRecorder = new MediaRecorder(stream, { mimeType: mime }); //录制
        var chunks = [];
        mediaRecorder.addEventListener("dataavailable", function (e) {
          chunks.push(e.data);
        }); //停止
        mediaRecorder.addEventListener("stop", function () {
          var blob = new Blob(chunks, { type: chunks[0].type });
          var url = URL.createObjectURL(blob);
          var a = document.createElement("a");
          a.href = url;
          a.download = "video.webm";
          a.click();
          setTimeout(() => {
            localStorage.setItem("isMediaRecorderEnd", true);
          }, 200);
        }); //手动启动
        mediaRecorder.start();
      }
      startMediaRecorder();
    </script>
  </body>
</html>
